<template>
  <div class="elm-edit">
    <elm-page-bb>
      <el-form ref="model" :model="model" size="small" label-width="120px">
        <elm-row>
          <el-form-item label="产品编码" prop="sys_code_key">
            <el-input v-model="model.sys_code_key" disabled placeholder="自动生成无需填写"></el-input>
          </el-form-item>
          <el-form-item label="产品名称" prop="name" :rules="[{ required: true, message: '必须填写'}]">
            <el-input v-model="model.name"></el-input>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="型号" prop="model">
            <el-input v-model="model.model"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="specification">
            <el-input v-model="model.specification"></el-input>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="单位" prop="unit" >
            <el-input v-model="model.unit"></el-input>
          </el-form-item>
          <el-form-item label="产品类型" prop="category">
            <elm-select-tree v-model="model.category" url="/business/plm/product/type/GetTree" path-url="/business/plm/product/type/GetPath"></elm-select-tree>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="产品属性" prop="attribute" >
            <el-input v-model="model.attribute"></el-input>
          </el-form-item>
          <el-form-item label="产品角色" prop="role">
            <elm-code dict_type="plm_product_role" v-model="model.role"></elm-code>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="损耗率" prop="loss_rate" :rules="[{trigger: 'blur' ,validator: validateNumber}]">
            <el-input v-model="model.loss_rate">
              <template slot="append"><div style="width: 25px;text-align: center;">%</div></template>
            </el-input>
          </el-form-item>
          <el-form-item label="计价方式" paop="pricing_method">
            <elm-code dict_type="plm_product_pricing_method" v-model="model.pricing_method"></elm-code>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="状态" prop="status">
            <el-select v-model="model.status" style="width: 100%">
              <el-option value="启用" label="启用"></el-option>
              <el-option value="停用" label="停用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期" prop="created_date">
            <el-date-picker v-model="model.created_date" type="date" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
        </elm-row>
        <el-form-item label="产品图片">
          <elm-upload module_name="biz_plm_product_pictures" :rel_id="model.id" :multiple="true" :limit="10" list-type="picture" tip=" "></elm-upload>
        </el-form-item>
        <el-form-item label="产品说明" prop="description">
          <el-input v-model="model.description" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="产品参数" prop="parameters">
          <el-input v-model="model.parameters" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="model.remark" type="textarea" :rows="2"></el-input>
        </el-form-item>
      </el-form>
      <template #bottom>
        <el-button type="success" size="small" @click="submit">立即保存</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </elm-page-bb>
  </div>
</template>

<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      model: {id: elm.newGuid(),created_date:new Date().toISOString().split('T')[0]},
    }
  },
  async created() {
  },
  destroyed() {
    this.request.callVue.tablebinding();
  },
  methods: {

    async submit() {
      await this.$refs["model"].validate();
      var res = await elm.post('/business/plm/product/Upsert', this.model);
      if (res == true) {
        this.v('保存成功。')
        this.close();
        this.request.callVue.tablebinding();
      }
      else {
        this.error('保存失败，请稍后尝试。');
      }
    },
  }
}
</script>